<template>
  <div>
    <van-nav-bar
      title="商品详情"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="more" size="25" color="black" />
          </template>
        </van-popover>
      </template>
      <!-- ---------------------上右下左------------------------------- -->
      <template #left>
        <van-icon name="arrow-left" size="25" color="black" />
      </template>
    </van-nav-bar>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, ShareSheet, Popover } from "vant";
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        { text: "返回首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
    onSelect(action, index) {
      console.log(action, index);
      switch (index) {
        case 0:
          this.$router.back();
          break;
        case 1:
          this.showShare = true;
          break;
      }
    },
  },
};
</script>

<style scoped>
</style>